import React, { memo } from "react";
import PropsTypes from "prop-types";
import { HotAnchorWrapper } from "./style";
import { fomatImgSizeY } from "@/utils/formatImgSize";

const HotAnchor = memo((props) => {
  const { topListPopular } = props;
  return (
    <HotAnchorWrapper>
      <div className="header">
        <div className="headerLeft">热门主播</div>
        <div className="headerRight"></div>
      </div>
      <div className="mainContent ShunCursor">
        {topListPopular.slice(0, 5).map((item, index) => {
          return (
            <div className="item" key={item.id}>
              <div className="itemLeft">
                <img src={fomatImgSizeY(item.avatarUrl, 140)} alt="" />
              </div>
              <div className="itemRight">
                <div className="name">{item.nickName}</div>
              </div>
            </div>
          );
        })}
      </div>
    </HotAnchorWrapper>
  );
});

HotAnchor.propTypes = {
  topListPopular: PropsTypes.array,
};
HotAnchor.defaultProps = {
  topListPopular: [],
};

export default HotAnchor;
